<script setup lang="ts">
import { ref,toRefs} from 'vue';
import { useRoute } from 'vue-router';
import{Report} from '../interfaces/mapping'
import { watchEffect } from 'vue';
import { useLoginStore } from "../store/user";
import {getImageByReportNo} from "../api/user"
import { reactive } from 'vue';
const  loginStore=useLoginStore();
let {age,gender,name,id} =toRefs(loginStore.getUserInfo())
const route=useRoute()

function onClickLeft() {
 history.go(-1)
}

function decodeURI(){
        //@ts-ignore
  let MyReportJSON = decodeURIComponent(route.params.MyReport)
  return JSON.parse(MyReportJSON)
}
let images:string[] = reactive([]);
const myReport = ref<Report | null>(null);
watchEffect(()=>{
    if(route.params.MyReport){
        myReport.value=decodeURI()
        images=[];
    } 
})

const show = ref(false);
async function checkImage(){
    show.value=true
    if(myReport.value?.reportNo){
        let res= await getImageByReportNo(myReport.value?.reportNo)
        images.push(res.data.data)      
    }
}
function closeImagePreview(){
    images.splice(0, images.length);
}
    const index = ref(0);
    //@ts-ignore
    const onChange = (newIndex) => {
      index.value = newIndex;
    };

// myReport.value=decodeURI()

</script>

<template>
    <div class="main">
        <van-nav-bar title="查看报告" left-text="返回" left-arrow  @click-left="onClickLeft" />
        <div class="title">
            <h3>影像检查报告单</h3>
        </div>
        <van-divider style="height: 2px;background-color: black;" />
        <div class="MyInfo">
            <div class="row">
                <span>姓名：</span>
                <span>{{name}}</span>
                <span>性别：</span>
                <span>{{gender}}</span>
            </div>

            <div class="row">
                <span>年龄：</span>
                <span>{{age}}</span>
                <span>患者ID：</span>
                <span>{{myReport?.userId}}</span>
            </div>

            <div class="row">
                <span>检查ID：</span>
                <span>{{myReport?.reportNo}}</span>
                <span>检查部位：</span>
                <span>{{myReport?.checkIntro}}</span>
            </div>

            <div class="row">
                <span>检查医院：{{myReport?.doctorId}}</span>       
            </div>
        </div>
        <van-divider style="height: 2px;background-color: black;" />
        <div class="iseeInFilm">
            <div class="row">
                <span>影像学所见</span>      
            </div>
            <div class="opinion">
                <van-text-ellipsis :content="myReport?.imageInfo" expand-text="展开" collapse-text="收起" />
            </div>
            <van-divider  />
        </div>

        <div class="iseeInFilm">
            <div class="row">
                <span>影像学诊断</span>      
            </div>
            <div class="opinion">
                {{myReport?.diagnose}}
            </div>
            <van-divider style="height: 2px;background-color: black;" />
        </div>
        <div class="row">
            报告医师 ： {{myReport?.doctorId}}
        </div>
        <div class="row">
            报告日期 ： {{myReport?.updateTime}}
        </div>
    </div>
    <div class="seeFilm">
        <van-button type="primary" style="width: 100%;" @click="checkImage">查看影像</van-button>
    </div>
    
    <van-image-preview v-model:show="show" :images="images" @change="onChange" @close="closeImagePreview">
  <template v-slot:index>第{{ index + 1 }}页</template>
</van-image-preview>


</template>
<style scoped>
.main {
    height: 100%;
    height: max-content;
    padding: 10px;
}

.title {
    width: 100%;
    height: max-content;
    text-align: center;
    margin: 5px;

}
.MyInfo{
width: 100%;
height: 200px;
font-size: small;
}
.row{
width: 100%;
padding: 0 50px 0 20px;
height: 50px;
line-height: 50px;
display: flex;
justify-content: space-between;
}
.opinion{
padding: 0 20px 0 20px;

}
.seeFilm{
    width: 100%;
    display: flex;
}
</style>